<template>
  <view class="page">
    <u-sticky bgColor="#fff">
      <view class="search-box">
        <view class="search-input">
          <image
            class="search-input-icon"
            :src="require('@/static/img/search-icon2.png')"
          />
          <input placeholder="查询" class="search-input-put" />
          <view class="search-input-btn">搜索</view>
        </view>
      </view>
      <u-tabs
        :list="list"
        lineColor="#1AC678"
        itemStyle=" height: 60px;"
        :activeStyle="{
          color: '#1AC678',
          fontWeight: 'bold',
        }"
        :inactiveStyle="{
          color: '#202020',
          fontWeight: 'bold',
        }"
      ></u-tabs>
    </u-sticky>
    <view class="main">
      <view class="item" v-for="(item, index) in 30" :key="index">
        <view class="item-title">
          <view>深圳公仔岩水源</view>
          <view
            @click="gotoPage('/pages/farming-admin/track-map')"
            class="item-track"
            >运输轨迹<u-icon name="arrow-right" color="#1ac678"></u-icon
          ></view>
        </view>
        <view class="item-desc">
          <view class="item-desc1"
            >种植批次: <text class="item-desc-text">YHSD202210102</text>
          </view>
          <view class="item-desc2"
            >基地名称: <text class="item-desc-text">榆阳基地</text></view
          >
        </view>
        <view class="item-pics">
          <image
            v-for="(item, index) in 3"
            class="item-pics-pic"
            src="https://img1.baidu.com/it/u=225041176,855892897&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1422"
            mode="scaleToFill"
          />
        </view>
        <view class="item-btns">
          <view
            @click="gotoPage('/pages/farming-admin/details')"
            class="item-btns-item"
            >详情</view
          >
          <view
            @click="gotoPage('/pages/farming-admin/details')"
            class="item-btns-item"
            >编辑</view
          >
          <view class="item-btns-item">删除</view>
        </view>
      </view>
      <view v-if="false" style="text-align: center">
        <image
          class="emtpy-pic"
          mode="widthFix"
          :src="require('@/static/img/emtpy2.png')"
        ></image>
        <view class="emtpy-text">暂无数据</view>
      </view>
    </view>
    <view class="btn-box">
      <button class="btn" @click="gotoPage('/pages/farming-admin/update')">
        <text class="btn-text" style="color: #fff">新增批次</text>
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: "农事任务",
        },
        {
          name: "农事记录",
        },
        {
          name: "采收记录",
        },
        {
          name: "基地废料处理记录",
        },
        {
          name: "农事任务",
        },
        {
          name: "农事记录",
        },
        {
          name: "采收记录",
        },
        {
          name: "基地废料处理记录",
        },
      ],
    };
  },
  onLoad() {},
  methods: {
    click(item) {
      console.log("item", item);
    },
    gotoPage(value) {
      uni.navigateTo({
        url: value,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  min-height: 100vh;
  background: #f6f6f6;
  padding-bottom: 150rpx;
}
.emtpy-pic {
  margin-top: 200rpx;
  width: 198rpx;
  margin-right: 70rpx;
}
.emtpy-text {
  font-size: 26rpx;
  font-weight: 400;
  color: #202020;
  text-align: center;
}
.search-box {
  width: 100%;
  height: 254rpx;
  background: #1ac678;
  padding-top: 108rpx;
  z-index: 20;
}
.search-input {
  width: 690rpx;
  height: 70rpx;
  border-radius: 53px 53px 53px 53px;
  margin: 0 auto;
  background: #fff;
  display: flex;
  align-items: center;
  padding: 4rpx;
  padding-left: 40rpx;
  &-icon {
    width: 35rpx;
    height: 35rpx;
    margin-right: 25rpx;
  }
  &-put {
    flex: 1;
    font-size: r26rpx;
  }
  &-btn {
    width: 105rpx;
    height: 63rpx;
    background: #1ac678;
    border-radius: 53rpx;
    font-size: 28rpx;
    font-weight: 800;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.main {
  padding: 35rpx 30rpx;
  .item {
    padding: 35rpx 23rpx;
    background: #fff;
    margin-bottom: 30rpx;
    &-title {
      display: flex;
      justify-content: space-between;
      font-size: 28rpx;
      font-weight: 800;
      color: #202020;
      margin-bottom: 21rpx;
    }
    &-track {
      display: flex;
      align-items: center;
      font-size: 21rpx;
      font-weight: 500;
      color: #1ac678;
    }
    &-desc {
      font-size: 21rpx;
      color: #666666;
      display: flex;
      margin-bottom: 18rpx;
      &-text {
        color: #202020;
        font-weight: bold;
      }
    }
    &-desc2 {
      width: 50%;
    }
    &-desc1 {
      width: 50%;
    }
    &-pics {
      display: flex;
      &-pic {
        width: 182rpx;
        height: 182rpx;
        margin-right: 23rpx;
        border-radius: 18rpx;
      }
    }
    &-btns {
      display: flex;
      justify-content: flex-end;
      margin-top: 28rpx;
      &-item {
        width: 105rpx;
        height: 63rpx;
        border-radius: 14rpx;
        border: 2rpx solid #e9e9e9;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 26rpx;
        color: #202020;
        margin-right: 18rpx;
      }
    }
  }
}
.btn-box {
  position: fixed;
  left: 0;
  bottom: 33rpx;
  width: 100%;
  // position: absolute;
  // bottom: 108rpx;
}
.btn {
  width: 697rpx;
  background: #1ac678;
  border-radius: 54rpx;
  margin: 0 auto;
  &-text {
    font-size: 32rpx;
    font-weight: 400;
    color: #ffffff;
  }
}
</style>
